<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>网站后台管理</title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/bootstrapValidator.min.css" />
		
		<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    	<!--[if lt IE 9]>
      		<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      		<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    	<![endif]-->
		
		<style type="text/css">
			@media (min-width: 768px) {
				#slider_sub{
					width: 250px;
					margin-top: 51px;
					position: absolute;
					z-index: 1;
					height: 600px;
				}
				.mysearch{ margin: 10px 0;}
				.page_main{
					margin-left: 253px;
				}
			}
		</style>
	</head>

	<body>
		<!--导航-->
		<nav class="navbar navbar-default navbar-static-top">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#slider_sub">
		        <span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#slider_sub1">
		        <span class="sr-only">切换导航</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">网站后台管理</a>
			</div>
			<ul id="slider_sub1" class="nav navbar-nav navbar-right collapse navbar-collapse" style="margin-right: 20px;">
				<li><a href=""><span class="badge" style="background: #C12E2A;">23</span></a></li>
				<li><a href=""><span class="glyphicon glyphicon-off"></span>&nbsp注销</a></li>
			</ul>
			<!--侧边功能栏-->
			<div id="slider_sub" class="navbar-default collapse navbar-collapse">
				<ul class="nav">
					<li>
						<!--搜索-->
						<div class="input-group mysearch">
							<input type="text" class="form-control" />
							<span class="input-group-btn">
								<button type="button" class="btn btn-default">
									<span class="glyphicon glyphicon-search"></span>
								</button>
							</span>
						</div>
					</li>
					<li>
						<a href="#sub1" data-toggle="collapse">系统功能<span class="glyphicon glyphicon-chevron-right pull-right"></span></a>
						<ul id="sub1" class="nav collapse">
							<li><a href=""><span class="glyphicon glyphicon-info-sign"></span>&nbsp&nbsp系统信息</a></li>
							<li><a href=""><span class="glyphicon glyphicon-user"></span>&nbsp&nbsp管理员管理</a></li>
							<li><a href=""><span class="glyphicon glyphicon-list-alt"></span>&nbsp&nbsp日志管理</a></li>
							<li><a href=""><span class="glyphicon glyphicon-remove-circle"></span>&nbsp&nbsp退出</a></li>
						</ul>
					</li>
					<li><a href="">栏目功能</a></li>
				</ul>
			</div>
		</nav>
		<div class="page_main">
			<!--面包导航-->
			<ol class="breadcrumb" style="margin-top: 3px;">
				<li><a>管理首页</a></li>
				<li><a>栏目管理</a></li>
				<li><a>增加栏目</a></li>
			</ol>
		</div><!--page_main-->
		<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/confirm-bootstrap.js"></script>
		<script type="text/javascript" src="js/bootstrapValidator.min.js"></script>
	</body>

</html>